<template>
    <div class="container">
        <div class="iframe-wrapper">
            <!-- IFrame 核心配置 -->
            <iframe :src="cusUrl" title="加载的调整页面"
                sandbox="allow-same-origin allow-scripts allow-popups allow-forms" loading="lazy"
                referrerpolicy="no-referrer-when-downgrade" @load="handleLoad"></iframe>
        </div>
    </div>
</template>

<script setup lang="ts">
import { computed } from "vue";
const props = withDefaults(defineProps<{
    plugUrl: string;
}>(), {
    plugUrl: "taskView"
});
const cusUrl = computed(() => {
    console.log("props.plugUrl",`${import.meta.env.VITE_PLUGIN_BASE_URL}${props.plugUrl}`);
    return `${import.meta.env.VITE_PLUGIN_BASE_URL}${props.plugUrl}`;
});

const handleLoad = () => {
    console.log("IFrame loaded successfully");
    // 可以在这里添加更多的逻辑，比如发送消息到 IFrame
};

</script>

<style scoped>
.container {
    margin-top: 5px;
    height: calc(100% - 10px);
}

h1 {
    color: #333;
    margin-bottom: 20px;
}

.iframe-wrapper {
    border: 1px solid #ddd;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    height: 100%;
    /* 占屏幕高度的80% */
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    /* 移除默认边框 */
}
</style>